<template>
  <el-dialog title="编辑课程" width="50%" :before-close="beforeDialogClose">
    <el-form  :model="form" label-width="100px">
      <el-form-item label="课程名称">
        <el-input
          v-model="form.course.title"
          placeholder="请输入课程名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="课程分类">
        <el-select v-model="form.course.categoryName" placeholder="请选择分类">
          <el-option label="基础护理" value="基础护理"></el-option>
          <el-option label="专科护理" value="专科护理"></el-option>
          <el-option label="急救技能" value="急救技能"></el-option>
          <el-option label="护理管理" value="护理管理"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="难度级别">
        <el-select
          v-model="form.course.difficulty"
          placeholder="请选择难度级别"
        >
          <el-option label="入门级" :value="0"></el-option>
          <el-option label="基础级" :value="1"></el-option>
          <el-option label="进阶级" :value="2"></el-option>
          <el-option label="专家级" :value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="课程时长 (小时)">
        <el-input-number
          v-model="form.course.lastingTime"
          :min="0"
          placeholder="请输入课程时长"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="课程描述">
        <el-input
          v-model="form.course.description"
          type="textarea"
          :rows="3"
          placeholder="请输入课程描述"
        ></el-input>
      </el-form-item>
      <el-form-item label="课程封面">
        <el-upload
          class="upload-demo"
          action="#"
          :auto-upload="false"
          :show-file-list="false"
          :on-change="handleCoverChange"
        >
          <el-button type="primary">选择文件</el-button>
          <template #tip>
            <div class="el-upload__tip">支持图片文件</div>
          </template>
        </el-upload>
        <div v-if="form.courseCover" class="mt-2">
          <img
            :src="form.courseCover"
            alt="课程封面"
            style="max-width: 150px"
          />
        </div>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="closeModal">取消</el-button>
        <el-button type="primary" @click="saveChanges">保存修改</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, watch } from "vue";
import { useUserStore } from "@/stores/user.js";
import { modalControllers } from "@/stores/modalController.js";
import { useCourseStore } from "@/stores/course.js"; // 1. 引入 course store
const modalController = modalControllers();
const userStore = useUserStore();
const courseStore = useCourseStore(); // 3. 实例化 course store
const form = ref(userStore.editedCourse);
const closeModal = () => {
  modalController.closePopup("editCourseModal");
};
const selectedCoverFile = ref(null);
const handleCoverChange = (file) => {
  selectedCoverFile.value = file.raw;  // 原始文件
  const reader = new FileReader();
  reader.onload = (e) => {
    form.value.courseCover = e.target.result;
  };
  reader.readAsDataURL(file.raw);
};

const beforeDialogClose = (done) => {
  closeModal();
  done();
};
// 监听 Store 变化并同步到 form
watch(
  () => userStore.editedCourse,
  (newVal) => {
    form.value = { ...newVal };
  },
  { deep: true },
);


const saveChanges = () => {
  const courseId = form.value.course.id;

  // 构造需要提交的字段（去除不必要的字段）
  const courseJsonData = {
    title: form.value.course.title,
    categoryName: form.value.course.categoryName,
    difficulty: form.value.course.difficulty,
    lastingTime: form.value.course.lastingTime,
    description: form.value.course.description,
    createdBy: form.value.course.createdBy,
    status: form.value.course.status,
  };
  console.log("courseJsonData", courseJsonData);
  // 调用封装好的 updateCourse 方法
  courseStore.updateCourse(courseId, courseJsonData, selectedCoverFile.value, () => {
    modalController.closePopup("editCourseModal");
  });
};

</script>

<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
